<template>
	<div class="common-layout">
		<el-container class="h-screen">

			<!-- 头部 -->
			<el-header class="h-16 bg-white flex items-center justify-between px-6 border-b border-gray-200">
				<div class="h-16 flex items-center pl-5 border-b border-gray-200">
					<h1 class="text-xl font-bold text-[#2A5D5B]">茗管家</h1>
				</div>

				<!-- 				<div class="flex items-center space-x-4">
					<span class="text-sm text-gray-600">admin@yunshui.com</span>
					<el-button text @click="showLogoutConfirm" class="!text-gray-600 hover:!text-[#2A5D5B]">
						退出账号
					</el-button>
				</div> -->

			</el-header>
			<!-- 头部 end-->

			<el-container>
				<!-- 侧边栏 -->
				<el-aside width="280px" class="bg-white h-screen">
					<el-menu router :default-active="$route.path" class="mt-4 border-none"
						:background-color="'transparent'" :active-text-color="'#ffffff'">
						<el-menu-item v-for="item in navItems" :key="item.path" :index="item.path"
							class="!h-auto mx-2 mb-2 transition-all duration-300">
							<div class="w-full flex items-center px-4 py-3 rounded-md border-2"
								:class="{ 'bg-[#2A5D5B] border-[#2A5D5B]': $route.path === item.path,'border-[#E0E0E0] hover:border-[#2A5D5B]': $route.path !== item.path }">
								<el-icon :size="24" class="mr-3" :class="{ 'text-white': $route.path === item.path }">
									<component :is="item.icon" />
								</el-icon>
								<span>{{ item.name }}</span>
							</div>
						</el-menu-item>
					</el-menu>
				</el-aside>
				<!-- 侧边栏 end-->

				<!-- 显示区 -->
				<el-main class="p-6 min-w-[1200px]">
					<router-view></router-view>
				</el-main>
				<!-- 显示区 end-->
			</el-container>
		</el-container>

		<el-dialog v-model="logoutDialogVisible" title="确认退出" width="400px">
			<span>确定要退出当前账号吗？</span>
			<template #footer>
				<el-button @click="logoutDialogVisible = false">取消</el-button>
				<el-button type="primary" @click="handleLogoutThenRedirect"
					class="!bg-[#2A5D5B] hover:!bg-[#1d4947] !text-white">
					确定
				</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted,
		nextTick
	} from 'vue'
	import {
		Notebook,
		House,
		ShoppingCart,
		Document,
		Box,
		User
	} from '@element-plus/icons-vue'
	import {
		useRouter
	} from 'vue-router'
	const router = useRouter()

	const navItems = [{
			name: '课程管理',
			icon: Notebook,
			path: '/course'
		},
		{
			name: '包间管理',
			icon: House,
			path: '/room'
		},
		{
			name: '商品管理',
			icon: ShoppingCart,
			path: '/product'
		},
		{
			name: '工作任务管理',
			icon: Document,
			path: '/work',
		},
		{
			name: '订单管理',
			icon: Box,
			path: '/order'
		},
		{
			name: '用户管理',
			icon: User,
			path: '/user'
		}
	]

	const activeNav = ref('课程管理')
	const logoutDialogVisible = ref(false)
	const updateTime = ref(new Date().toLocaleTimeString('zh-CN', {
		hour: '2-digit',
		minute: '2-digit'
	}))

	const courseChart = ref(null)
	const roomChart = ref(null)

	const handleMenuSelect = (index) => {
		activeNav.value = index
	}

	const showLogoutConfirm = () => {
		logoutDialogVisible.value = true
	}

	const handleLogoutThenRedirect = () => {
		// 执行退出逻辑
		logoutDialogVisible.value = false
		console.log('用户已退出')
		// 跳转登录页
		router.push('/login')
	}
</script>

<style scoped>
	/* 深度选择器写法 */
	.nav-link {
		text-decoration: none !important;
	}

	.nav-link.active {
		color: white;
	}

	.nav-link:not(.active) {
		color: #666;
	}
</style>